<template>
    <div class="hello">
        <div class="upload">
            <div class="upload_warp">
                <vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions" 
                        @vdropzone-success="uploadSuccess" :useCustomSlot=true>
                    <div class="dropzone-custom-content">
                        <h3 class="dropzone-custom-title">将文件拖到此处</h3>
                        <div class="subtitle">或点击上传文件</div>
                    </div>
                </vue-dropzone>
            </div>
            <div class="btn_uploading">
                <el-button type="primary" round @click="uploading">上传文件</el-button>
            </div>
            <!-- 文件列表 -->
            <div class="p_kuang">
                <h3 id="p_titie1">
                    文件列表
                    <br/>
                    <span id="p_titie2">
                        （点击可下载）
                        <br/>
                        <br/>
                    </span>
                    <hr/>
                </h3>
                
                <div id="p_text1">
                    <div class="p_block" v-for="i in filelist" :key="i" @click="download(i)">
                        <el-link type="primary">
                            {{ i }}
                        </el-link> 
                    </div>               
                </div>
            </div>

        </div>
    </div>
</template>

<script>
// import Mock from './api/file.js';
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
import fileDownload from 'js-file-download'
export default {
    components: {vueDropzone: vue2Dropzone},
    data: function () {
        return {
            // 文件列表
            filelist:{
                file:'',
            },
                
                // "sdf.txt",
                // "sdfsd.jpg",
                // "sdfsdf.md",
                // "sdf.txt",
                // "sdfsd.jpg",
                // "sdfsdf.md",
                // "sdf.txt",
                // "sdfsd.jpg",
                // "sdfsdf.md",
                // "sdf.txt",
                // "sdfsd.jpg",
                // "sdfsdf.md",
            
            // 文件上传配置
        dropzoneOptions: {
            // url: 'https://httpbin.org/post',
            url: 'http://localhost:3000/learningSpace/user/upload',
            thumbnailWidth: 150,
            //   previewTemplate: this.template(),  // 自定义文件上传后显示的样式
            headers:{"Authorization":'Bearer ' + window.sessionStorage.getItem('token')},
            paramName: "file", 
            maxFilesize: 5.0, // 上传的文件大小
            maxFiles:3,//一次性上传的文件数量上限
            // acceptedFiles: ".xls,.xlsx",  
            addRemoveLinks : true,//添加移除文件
            autoProcessQueue: false,//不自动上传
            dictCancelUploadConfirmation:'你确定要取消上传吗？',
            dictMaxFilesExceeded: "只能上传{{maxFiles}}个文件",
            dictFileTooBig:"文件过大({{filesize}}MB). 上传文件最大支持: {{maxFilesize}}MB.",
            dictDefaultMessage :
            '<span class="bigger-150 bolder"><i class="icon-caret-right red"></i> 拖动文件至该处</span> \
            <span class="smaller-80 grey"></span> <br /> \
            <i class="upload-icon icon-cloud-upload blue icon-3x"></i>',
            dictResponseError: '文件上传失败!',
            dictInvalidFileType: "你不能上传该类型文件",
            dictCancelUpload: "取消上传",
            dictCancelUploadConfirmation: "你确定要取消上传吗?",
            dictRemoveFile: "移除文件",
            uploadMultiple:false,//允许上传多个
            init: function() {
                //上传文件时触发的事件
                this.on("addedfile", function(file) { 
                //浏览器控制台输出js
                    console.log("File " + file.name + " uploaded1");
                });
                //上传文件成功时触发的事件
                this.on("success", function(file) {
                    console.log("File " + file.name + " uploaded2");

                });
                //移除文件触发的事件
                this.on("removedfile", function(file) {
                    console.log("File " + file.name + " removed");
                });
            }
        }
        }
    },
    // 初始
    created(){
            this.getFileList()
        },
    methods:{
        uploading(){
            this.$refs.myVueDropzone.processQueue()
        },
        uploadSuccess(file, response){
            console.log(response);

	        if(response.status == 200) {
	            file.upload.file_url = response.data // 记录文件上传后保存在服务端的路径，用于后续提交存入数据库
                console.log(response);
                this.$message.success('上传成功！');
	        }
            if(response.status == 403){
                this.$message.error('文件名重复！');
            }
            // else{
	        //     let errorEle,preview
	        //     errorEle = file.previewElement.querySelector(".error-message");
	        //     errorEle.innerHTML= `<i class="el-icon-warning-outline"></i>&nbsp;`+response.msg   // 自定义显示异常提示
	        //     preview = file.previewElement
	        //     preview.style.background  = "rgba(235,103,81,0.1)"
	        //     preview.style.borderColor = "#fdefed"
	        // }
	    },
            
        // get请求 获得文件列表
        async getFileList(){
            // get方法请求  地址 与 参数（参数最好定义到data中）
            const { data:res} = await this.$http.get('user/file')
            
            if(res.status !==200){
                return this.$message.error('获取推荐伙伴信息失败')
            }
            console.log(res)
            
            this.filelist=res.data.list
        },
        async download(i){
            console.log(i)
			const res = await this.$http.post('user/download',{
				name:i,
				responseType:'arraybuffer'
			})
			fileDownload(res.data,i)
			
     //        const { data:res} = await this.$http.post('user/download', {name:i});
					// console.log(res);
     //                // 状态码是200时成功，message弹框提示
     //                if (res.status !=200) 
     //                    return this.$message.error("下载失败"); 
     //                this.$message.success(res.message);
        }

    }

}

    
</script>

<style scoped>
.upload {
    border: 1px solid #2196F3;
    /* background-color: #fff; */
    width: 100%;
    box-shadow: 0 0 10px #ddd;
}
.hello {
    padding: 30px;
    /* width: 200px; */
    /* margin-left: 3%; */
    text-align: center;
}
.upload_warp {
		  margin: 14px;
		  /* height: 130px; */
          width: 98%;
		  height: 100%;
		  border: 2px dashed #2196F3;
		  border-radius: 4px;
		  cursor: pointer;

}
.btn_uploading{
    margin-bottom: 14px;
}
.p_kuang{
    background-color:#fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 30px;
    height: 600px;
    width: 820px;
    margin-bottom: 50px;
    margin-left: 400px;
}
/* 水平布局 */
#p_text1{
    height: 450px;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* 呈现每一个伙伴 */
.p_block{
    width: 240px;
    height: 50px;
    font-size: 20px;
    text-align: center;

}
#p_titie1{
    margin-top: 30px;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 30px;
}
#p_titie2{
    font-size: 20px;
}
</style>
